<template>
  <el-dialog title="选择学生" :visible.sync="isShow" :before-close="close" :close-on-click-modal="false"
             width="60%" :close-on-press-escape="false">
     <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="queryStudents"
            @reset="resetQueryForm"
      >
        <el-form :model="queryStudentForm" ref="queryStudentForm" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="年级:" prop="grade">
                <el-date-picker v-model="queryStudentForm.grade" type="year" style="width:100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="培养层次:" prop="trainingLevel">
                <el-select v-model="queryStudentForm.trainingLevel" style="width:100%;">
                  <el-option
                    v-for="item in options.trainingLevel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学院:" prop="faculty">
                <el-select v-model="queryStudentForm.faculty" @change="changeFaculty" style="width:100%;">
                  <el-option
                    v-for="item in options.faculty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业 : " prop="profession">
                <el-select v-model="queryStudentForm.profession" style="width:100%;">
                  <el-option
                    v-for="item in options.profession"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="培养类别:" prop="trainingCategory">
                <el-select v-model="queryStudentForm.trainingCategory" style="width:100%;">
                  <el-option
                    v-for="item in options.trainingCategory"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学习形式:" prop="formLearning">
                <el-select v-model="queryStudentForm.formLearning" style="width:100%;">
                  <el-option
                    v-for="item in options.formLearning"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学位类型:" prop="degreeType">
                <el-select v-model="queryStudentForm.degreeType" style="width:100%;">
                  <el-option
                    v-for="item in options.degreeType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </ConditionCard>
      <el-card shadow="never" body-style="padding: 24px;" class="card-margin">
        <h1 class="condition-title">学生信息</h1>
        <div class="div-main clearfix">
          <div class="float-left">
              <el-input
                v-model="queryStudentForm.name"
                placeholder="输入学生姓名或学号"
                prefix-icon="el-icon-search"
                @keyup.enter.native="queryStudents"
              ></el-input>
          </div>
        </div>
        <el-table
          ref="studentTable"
          :data="students"
          @selection-change="handlePickStudentsChange"
          stripe
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="年级">
            <template slot-scope="scope">{{ scope.row.grade }}</template>
          </el-table-column>
          <el-table-column prop="studentId" label="学号" width="90"></el-table-column>
          <el-table-column label="姓名">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="培养层次" width="80">
            <template slot-scope="scope">{{ scope.row.trainingLevelI18n }}</template>
          </el-table-column>
          <el-table-column label="培养类别" width="80">
            <template slot-scope="scope">{{ scope.row.trainingCategoryI18n }}</template>
          </el-table-column>
          <el-table-column label="学位类别" width="80">
            <template slot-scope="scope">{{ scope.row.degreeTypeI18n }}</template>
          </el-table-column>
          <el-table-column label="学习形式" width="80">
            <template slot-scope="scope">{{ scope.row.formLearningI18n }}</template>
          </el-table-column>
          <el-table-column label="学院" width="200">
            <template slot-scope="scope">{{ scope.row.facultyI18n }}</template>
          </el-table-column>
          <el-table-column label="专业" width="200">
            <template slot-scope="scope">{{ scope.row.professionI18n }}</template>
          </el-table-column>
        </el-table>
        <el-row :gutter="0">
          <el-col>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handlePageNumChange"
              :current-page="queryStudentForm.pageNum_"
              :page-sizes="[20,50,100,500,1000]"
              :page-size="queryStudentForm.pageSize_"
              layout="total, prev, pager, next"
              :total="queryStudentForm.total"
              style="float: right;margin:10px 20px 0 0;"
            ></el-pagination>
          </el-col>
        </el-row>
      </el-card>
    <div slot="footer">
      <el-button @click="close">{{$t('common.btn.cancel')}}</el-button>
      <el-button type="primary" @click="SelectStudent">{{$t('common.btn.confirm')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import { findFaculty } from "common/src/api/faculty";
import UTILS from 'common/src/utils/utils'
import { findStuInfoList } from 'common/src/api/studentinfo'
import { getGraduateDegreePage } from "common/src/api/resource/course";
export default {
  props: {
    isShow: { type: Boolean, required: true },
  },
  data() {
    return {
      queryStudentForm: {
        pageSize_: 20,
        pageNum_: 1,
        trainingLevel: '',
        grade: '',
        faculty: '',
        profession: '',
        name: '',
        formLearning: '',
        trainingCategory: '',
        total: '',
        degreeType:''
      },
      options: {
        trainingLevel: [],
        faculty: [],
        profession: [],
        formLearning: [],
        trainingCategory: [],
        degreeType:[]
      },
      students: [],
      fieldKeys: {
        trainingLevel: 'X_PYCC',
        degreeCategory: 'X_XWLB',
        spcialPlan: 'X_ZXJH',
        formLearning: 'K_XXXS',
        degreeType: 'X_XWLX',
        trainingCategory: 'X_PYLB',
        project: 'X_GLBM',
      },
      keys: [
        'X_PYCC',
        'X_XWLB',
        'X_ZXJH',
        'K_XXXS',
        'X_XWLX',
        'X_PYLB',
        'X_GLBM',
      ],
      currentStudents: [],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      findFaculty().then(res => { 
          let data = {"X_YX": res.data};
          UTILS.fillSelect({ faculty: "X_YX" }, data, this.options);
      });
      const data = {
        lang: this.$store.getters.language || 'cn',
        type: 'allChild',
        keys: this.keys,
      }
      queryDic(data).then((res) => {
        if (res.code === 200) {
          UTILS.fillSelect(this.fieldKeys, res.data, this.options)
        }
      })
    },
    changeFaculty(val) {
      this.options['profession'] = []
      this.queryStudentForm.profession = "";
      this.queryMajors();
      // let params = {
      //   lang: this.$store.getters.language || 'cn',
      //   type: 'allChild',
      //   keys: ['G_ZY'],
      //   filter: {
      //     prefix: [val],
      //     specilaCode: 'XY2ZY',
      //   },
      // }
      // queryDic(params).then((res) => {
      //   if (res.code == 200) this._fill('profession', res.data.G_ZY)
      // })
    },
    queryMajors() {
      if (this.queryStudentForm.faculty) {
          this.options["profession"] = [];
          const data = {
              college: this.queryStudentForm.faculty,
              page: false
          };
          getGraduateDegreePage(data).then(res => {
              if (res.code === 200) {
                  this.options["profession"] = [];
                  let majors = _.map(res.data.list, item => {
                      return {
                          value: item.code,
                          label:
                              "cn" !== this.$store.getters.language
                                  ? item.nameEn
                                  : item.name
                      };
                  });
                  majors &&
                      0 < majors.length &&
                      (this.options["profession"] = [...majors]);
              }
          });
      }
    },
    _fill(type, data) {
      for (let key in data) {
        this.options[type].push({
          value: key,
          label: data[key],
        })
      }
    },
    handleSizeChange(val) {
      this.queryStudentForm.pageSize_ = val
      this.queryStudents()
    },
    handlePageNumChange(val) {
      this.queryStudentForm.pageNum_ = val
      this.queryStudents()
    },
    handlePickStudentsChange(val) {
      this.currentStudents = val
    },
    queryStudents() {
      let query = Object.assign({}, this.queryStudentForm)
      if (query.grade) query.grade = query.grade.getFullYear()
      findStuInfoList(query).then((response) => {
        if (response.code == 200) {
          this.students = response.data.list
          this.queryStudentForm.total = response.data.total_
        }
      })
    },
    SelectStudent() {
      if (this.currentStudents.length == 0) {
        this.$message({
          type: 'warning',
          message: '请选择学生',
        })
        return
      }
      this.currentStudents = this.currentStudents.map((ele) => {
        return { studentId: ele.studentId, name: ele.name }
      })
      this.$emit('get-student', this.currentStudents)
      this.$refs.studentTable.clearSelection()
      this.$refs.queryStudentForm.resetFields();
    },
    close() {
      this.$refs.queryStudentForm.resetFields();
      this.$emit('change-visible')
    },
    resetQueryForm() {
      this.$refs.queryStudentForm.resetFields();
      this.queryStudents()
    },
  },
  watch: {
    isShow: function(_n, _o) {
      if (_n) this.queryStudents()
      else this.currentStudents = []
    },
  },
}
</script>
<style lang="scss" scoped>
.div-main {
        margin-bottom: 16px;
    }
</style>